<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>执法者签名</title>

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" /><!-- this is for mobile (Android) Chrome -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> <!--  mobile Safari, FireFox, Opera Mobile  -->
    <link href="../WEUI/jquery-weui.css" rel="stylesheet" />
    <link href="../WEUI/weui.min.css" rel="stylesheet" />
    <script src="../libs/modernizr.js"></script>
    <script type="text/javascript" src="../libs/flashcanvas.js"></script>


    <style type="text/css">

        div {
            margin-top:1em;
            margin-bottom:1em;
        }
        input {
            padding: .5em;
            margin: .5em;
        }
        select {
            padding: .5em;
            margin: .5em;
        }

        #signatureparent {
            color:darkblue;
            background-color:darkgrey;
            /*max-width:600px;*/
            padding:20px;
        }

        /*This is the div within which the signature canvas is fitted*/
        #signature {
            border: 2px dotted black;
            background-color:lightgrey;
        }
        /* Drawing the 'gripper' for touch-enabled devices */
        html.touch #content {
            float:left;
            width:92%;
        }
        html.touch #scrollgrabber {
            float:right;
            width:4%;
            margin-right:2%;
            background-image:url()
        }
        html.borderradius #scrollgrabber {
            border-radius: 1em;
        }
        .btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
        .btn * { font-style: normal; background-repeat: no-repeat; display: block; position: relative; }
        .btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
        .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
        .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
        .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
        * html .btn span,
        * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }
        .btn.blue { background: #2ae; }
        .btn.green { background: #9d4; }
        .btn.pink { background: #e1a; }
        .btn:hover { background-color: #a00; }
        .btn:active { background-color: #444; }
        .btn[class] {  background-position: bottom; }
        * html .btn { border: 3px double #aaa; }
        * html .btn.blue { border-color: #2ae; }
        * html .btn.green { border-color: #9d4; }
        * html .btn.pink { border-color: #e1a; }
        * html .btn:hover { border-color: #a00; }
        p { clear: both; padding-bottom: 2em; }
        form { margin-top: 2em; }
        form p .btn { margin-right: 1em; }
        textarea { margin: 1em 0;}</style>
</head>
<body>
<div style="width: 90%;margin: 0 auto;">
    <div id="content"style="width: 100%;margin: 0 auto;">
        <div id="signatureparent">
            <div>执法者签名</div>
            <div id="signature"></div></div>
        <div id="tools"style="margin-bottom: 75px;">
            <button type="button" style="float:left;" class="btn blue" onclick="importImg()" value="获取签名">确定签名</button>

            <button class="btn" style="float:left;margin-left: 20px;" onclick="clearSig()" >重置</button>
            <!--<button >获取签名</button>-->
        </div>
        <div><p>签名展示区域:</p>
            <div id="displayarea"style="background-color:#d0d0d0 ">
                <img id="signImg" style="display: none">
            </div></div>
    </div>
    <div style="margin-top:20px">
        <button type="button" onclick="submitSignImg()" class="weui-btn weui-btn_primary" style="width:90%;font-size:20px;">提交签名</button>
    </div>
</div>
<script src="../libs/jquery.js"></script>
<script>
    var pics="";
    function clearSig(){
        $("#signImg").css("display","none");

        $("#signature").jSignature("clear");
    }
    function importImg(){
        var sig=$("#signature");
        $("#signImg").css("display","block");
        $("#signImg").attr("src","data:"+sig.jSignature('getData'));
    }
    (function($) {
        var topics = {};
        $.publish = function(topic, args) {
            if (topics[topic]) {
                var currentTopic = topics[topic],
                    args = args || {};

                for (var i = 0, j = currentTopic.length; i < j; i++) {
                    currentTopic[i].call($, args);
                }
            }
        };
        $.subscribe = function(topic, callback) {
            if (!topics[topic]) {
                topics[topic] = [];
            }
            topics[topic].push(callback);
            return {
                "topic": topic,
                "callback": callback
            };
        };
        $.unsubscribe = function(handle) {
            var topic = handle.topic;
            if (topics[topic]) {
                var currentTopic = topics[topic];

                for (var i = 0, j = currentTopic.length; i < j; i++) {
                    if (currentTopic[i] === handle.callback) {
                        currentTopic.splice(i, 1);
                    }
                }
            }
        };
    })(jQuery);

</script>
<script src="../jSignature.js"></script>
<script src="../plugins/jSignature.CompressorBase30.js"></script>
<script src="../plugins/jSignature.CompressorSVG.js"></script>
<script src="../plugins/jSignature.UndoButton.js"></script>
<script src="../plugins/signhere/jSignature.SignHere.js"></script>
<script src="../Yang/zeling.js"></script>
<script>
    $(document).ready(function() {

        // This is the part where jSignature is initialized.
        var $sigdiv = $("#signature").jSignature({'UndoButton':true,height:300,width:'100%'})

            // All the code below is just code driving the demo.
            , $tools = $('#tools')
            , $extraarea = $('#displayarea')
            , pubsubprefix = 'jSignature.demo.'

    });
    //判断是否签名
    function submitSignImg(){
        if( $("#signature").jSignature('getData', 'native').length == 0){
            alert("请先进行签名");
            return;
        }
        else if($("#signImg").css("display")=="none"){
            alert("请先进行确认签名")
        }
        else   {
            var imgName=$("#signature").jSignature('getData');
            // alert(imgName);
            sumitImageFile(imgName).then(function (data) {
                console.log(data);
            });
        }
    }
    /**
     * 通过ueditor将base64图片提交到服务器,依赖jquery.
     * var base64str = "................ABAQAAAQABAAD/2wBDAAMCAgICOK//Z";
     * sumitImageFile(base64str).then(function (data) {
     *     console.log(data);
     * });
     */
    function sumitImageFile(base64Codes) {

        var convertBase64UrlToBlob = function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], { type: mime });
        };
        var getFileExt = function (urlData) {
            var arr = urlData.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            return mime.replace("image/", "");

        };
        var deferred = $.Deferred();
        var form = document.forms[0];
        //var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
        var formData = new FormData();
        var fileExt = getFileExt(base64Codes);
        //convertBase64UrlToBlob函数是将base64编码转换为Blob
        formData.append("file", convertBase64UrlToBlob(base64Codes), "file_" + Date.parse(new Date()) + "." + fileExt);  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
        //ajax 提交form
        $.ajax({
            url: "../upLoderPic/uploadImg1",
            type: "POST",
            data: formData,
            processData: false,         // 告诉jQuery不要去处理发送的数据
            contentType: false,        // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                if (data) {
                    data = eval(data);
                    if (data[0].error == "0") {
                        // deferred.resolve(window.location.origin + data.url);
                        var signName=data[0].url;
                        // alert(signName);
                        // alert(RecordId);
                        updateSighRecord(signName,RecordId);
                    }

                    else {
                        //提交失败
                        alert("提交失败请重新提交");
                        deferred.reject("error");
                    }
                }
                else {
                    alert("出现错误请重新提交");

                    deferred.reject("error");
                }

            },
            xhr: function () {            //在jquery函数中直接使用ajax的XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                        console.log("正在提交." + percentComplete.toString() + '%');        //在控制台打印上传进度
                    }
                }, false);
                return xhr;
            }
        });
        return deferred.promise();
    }

</script>
</body>
</html>
